<template>
	<view class="content">
		<view class="title">
			地址信息
		</view>
		<view class="item">
			<text class="key">所在地区</text>
			<text v-if="!info.area" class="input-style" @tap="visible=true">请选择地区</text>
			<text v-else class="form-input" @tap="visible=true">{{info.area}}</text>
			<cityPicker :column="3" :mask-close-able="true" @confirm="confirm" @cancel="cancel" :visible="visible" />
		</view>
		<view class="item">
			<text class="key">详细地址</text>
			<input class="form-input" type="text" placeholder="请输入详细地址" v-model="info.address"
				placeholder-class="input-style" />
		</view>
		<view class="item">
			<text class="key">邮编</text>
			<input class="form-input" type="text" placeholder="请输入邮编" v-model="info.code"
				placeholder-class="input-style" />
		</view>
		<view class="title">
			收货人信息
		</view>
		<view class="item">
			<text class="key">收货人</text>
			<input class="form-input" type="text" placeholder="请输入收货人姓名" v-model="info.name"
				placeholder-class="input-style" />
		</view>
		<view class="item">
			<text class="key">联系电话</text>
			<input class="form-input" type="number" placeholder="请输入收货人电话" v-model="info.tel"
				placeholder-class="input-style" />
		</view>
		<view class="check">
			<uni-icons type="checkbox-filled" size="24" color="#333" v-if="info.default"
				@tap="set()"></uni-icons>
			<uni-icons type="circle" size="24" color="#333" v-else @tap="set()"></uni-icons>
			<text>设为默认地址</text>
		</view>
		<view class="btn-area">
			<button @click="submit" class="btn-login">保存</button>
		</view>
	</view>
</template>

<script setup>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	onLoad((e) => {
		if (e.type == 'edit') {
			uni.setNavigationBarTitle({
				title: '编辑地址'
			})
		}
	})
	const info = reactive({
		area: '',
		address: '',
		code: '',
		name: '',
		tel: '',
		default:false
	})
	const visible = ref(false)
	const confirm = (e)=>{
		info.area = e.name
		visible.value = false
	}
	const cancel  = ()=>{
		visible.value = false
	}
	const set = ()=>{
		info.default = !info.default
	}
	const submit = ()=>{
		
	}
</script>

<style lang="scss">
	.title {
		color: #666;
		line-height: 80rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.item {
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		background-color: #fff;
		line-height: 80rpx;
		margin-bottom: 2rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.key {
			width: 200rpx;
		}
	}
	.check{
		font-size: 28rpx;
		margin-top: 20rpx;
		display: flex;
		gap: 10rpx;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.btn-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 30rpx;
		margin-top: 60rpx;
	
		.btn-login {
			background-color: #f6bf00;
			color: #333;
			font-size: 28rpx;
			height: 80rpx;
			width: 600rpx;
			line-height: 80rpx;
		}
	}
</style>